<template>
  <div id="login">
    <div class="login-box">
      <h1>后台管理</h1>
<!--      Tab栏-->
      <el-tabs v-model="activeName">
<!--        登录-->
        <el-tab-pane label="账户密码登录" name="usernameLogin">
<!--          登录表单-->
          <el-form :model="user" :rules="userRules" ref="userRef" label-width="70px">
            <el-form-item label="用户名" prop="username">
                <el-input prefix-icon="el-icon-user" v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
               <el-input prefix-icon="el-icon-lock" v-model="user.password"></el-input>
            </el-form-item>
          </el-form>
<!--          自动登录按钮-->
          <div class="autoLogBtn">
            <el-checkbox v-model="autoLog" >自动登录</el-checkbox>
          </div>
<!--          登录按钮-->
          <el-button type="primary" @click="doLogin" class="doLoginBtn">登录</el-button>
          <div class="registerBtn">
            <el-button type="text" @click="GoRegister">注册账号</el-button>
          </div>
        </el-tab-pane>
<!--        注册-->
        <el-tab-pane label="注册账户" name="register">
<!--          注册表单-->
          <el-form :model="register" :rules="registerRules" ref="registerRef" label-width="80px">
            <el-form-item label="用户名" prop="username">
                <el-input prefix-icon="el-icon-user" v-model="register.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input prefix-icon="el-icon-lock" v-model="register.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirm">
              <el-input prefix-icon="el-icon-lock" v-model="register.confirm"></el-input>
            </el-form-item>
          </el-form>
<!--          注册按钮-->
          <el-button type="primary" @click="doRegister" class="doRegister">注册</el-button>
          <div class="loginBtn">
            <el-button type="text" @click="GoLogin">已有账号？前往登录</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import request from "../utils/request";
export default {
  data() {
    // 自定义校验规则
    let validConfirm = (rule,value,callback)=>{
      if(value !== this.register.password){
        callback(new Error("请输入两次相同的密码"))
      }else{}
      callback()
    }
    return {
      activeName:"usernameLogin",
      // 登录表单信息
      user: {
        username: "",
        password: "",
      },
      // 登录表单验证规则
      userRules:{
        username: [
            {required:true,message:"请输入用户名",trigger:"blur"}
        ],
        password: [
            {required:true,message:"请输入密码",trigger:"blur"},
          {min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur'}
        ]
      },
      // 注册表单
      register:{
        username:"",
        password:"",
        confirm:""
      },
      // 注册表单验证规则
      registerRules:{
        username: [
          {required:true,message:"请输入用户名",trigger:"blur"}
        ],
        password: [
          {required:true,message:"请输入密码",trigger:"blur"},
          {min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur'}
        ],
        confirm: [
          {required:true,message:"请输入密码",trigger:"blur"},
          {validator:validConfirm,trigger: "blur"}
        ]
      },
      // 是否勾选自动登录
      autoLog:false,
    };
  },
  methods: {
    // 登录
    doLogin() {
      this.$refs.userRef.validate(async valid=>{
        if(valid){
         const {data:res} = await request.post("login", {
                username: this.user.username,
                password: this.user.password,
              })
                if (res.code === 20000) {
                  const token = res.token;
                  if(this.autoLog){
                    localStorage.setItem("token", token);
                  }else{
                    sessionStorage.setItem("token",token)
                  }
                  this.$message.success("登录成功");
                  this.$router.push("/book");
                } else {
                    this.$message.error("用户名或密码错误，请重新输入");
                }
        }
      })
    },
    // 前往注册
    GoRegister() {
      this.$refs.userRef.resetFields()
      this.activeName  = "register"
    },
    // 注册
    doRegister(){
      this.$refs.registerRef.validate(async valid=>{
        if(valid){
         const {data:res} = await request
              .post("user", {
                username: this.user.username,
                password: this.user.password,
              })
          if (res.code === 20000) {
            this.$message.success("注册成功");
            this.activeName = "usernameLogin"
          } else {
            this.$message.error("注册失败，请重试");
          }
        }
      })
    },
    // 前往登录
    GoLogin() {
      this.$refs.registerRef.resetFields()
      this.activeName  = "usernameLogin"
    }
  },
};
</script>

<style scoped>
*{
  padding:0;
  margin: 0;
  box-sizing: border-box;
}

body{
  background-color: #f0f3f7;
}
#login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
#login .login-box {
  width: 390px;
  height: 456px;
  text-align: center;
}
.doLoginBtn,.doRegister{
  margin-top: 10px;
  width: 100%;
  height: 40px;
}
.autoLogBtn{
  margin-left: 30px;
  text-align: left;
}
.el-form-item{
  margin-bottom: 25px;
}
.registerBtn,.loginBtn{
  display: flex;
  justify-content: flex-end;
}
</style>